/* eslint-disable no-unused-vars */
/* eslint-disable implicit-arrow-linebreak */
/* eslint-disable multiline-ternary */
import FormGroupElement from '@src/components/formGroup/FormGroupElement'

const Answer = ({
  formik,
  content,
  type,
  contentIndex,
  edit
}) => {
  const rows = type === 1 && 4
  return (
    <div className={'mx-2'}>
      <FormGroupElement
        disabled={!edit}
        inputType={type === 1 ? 'textarea' : 'text'}
        inputName={`answer-${contentIndex}-${type}`}
        rows={rows}
        label={''}
        labelClassName="pl-10px"
        required={content.required}
        value={formik.values.content[contentIndex]?.answer}
        onChange={(e) =>
          formik.setFieldValue(
            `content[${contentIndex}].answer`,
            e.target.value
          )
        }
        inputClassName="form-fields resize-none skin-change"
      />
    </div>
  )
}

const Check = ({
  formik,
  content,
  type,
  contentIndex,
  edit
}) => {
  const handleRadioChange = (e, i) => {
    formik.setFieldValue(`content[${contentIndex}].radioCheck`, e.target.value)
  }

  return (
    <div className={'mx-2'}>
      {content?.option.map((option, i) => (
        <FormGroupElement
          key={i}
          disabled={!edit}
          inputName={`${contentIndex}-option-${option?.answer}-${type}`}
          label={`${option.answer}`}
          inputType={type === 4 ? 'radio' : type === 3 && 'checkbox'}
          labelClassName="pl-10px"
          inputClassName="skin-change"
          defaultValue={option?.answer}
          checked={
            type === 3
              ? formik.values?.content?.[contentIndex]?.option?.[i]?.checked ===
                true
              : type === 4 &&
                option?.answer.trim() ===
                  formik.values?.content[contentIndex]?.radioCheck
          }
          onChange={(e) => {
            if (type === 3) {
              formik.setFieldValue(
                `content[${contentIndex}].option[${i}].checked`,
                e.target.checked
              )
            } else if (type === 4) {
              handleRadioChange(e, i) // call the custom radio change handler
            }
          }}
          formGroupClassName="client_profile--checkbox client_profile--doubleCol__50"
        />
      ))}
    </div>
  )
}
export default function renderContent(props) {
  const { formik, content, noteId, contentIndex, edit } = props
  switch (parseInt(content.type)) {
    case 1:
      return (
        <Answer
          type={1}
          edit={edit}
          noteId={noteId}
          formik={formik}
          content={content}
          contentIndex={contentIndex}
        />
      )
    case 2:
      return (
        <Answer
          type={2}
          edit={edit}
          formik={formik}
          noteId={noteId}
          content={content}
          contentIndex={contentIndex}
        />
      )
    case 3:
      return (
        <Check
          type={3}
          edit={edit}
          formik={formik}
          noteId={noteId}
          content={content}
          contentIndex={contentIndex}
        />
      )
    case 4:
      return (
        <Check
          type={4}
          edit={edit}
          formik={formik}
          noteId={noteId}
          content={content}
          contentIndex={contentIndex}
        />
      )
    default:
      return null
  }
}
